import React, { useRef } from 'react';
import { Card, Divider, Popconfirm, Space, Tag } from 'antd';
import { adhubRequest } from '@/utils/request';
import ATable from '@apulis/table';
import { useIntl, getIntl, history } from 'umi';
import { getText } from '@/utils/utils';
import moment from 'moment';
import { TIMEFORMAT } from '@/utils/const';

import type { ATableColumn } from '@apulis/table';
import type { ActionType } from '@apulis/table/lib/typing';
import type { DataType } from '../../model';

const { formatMessage: getF } = getIntl();

const STATUS_CONFIG = {
  'labeled': { color: '#2db7f5', text: getF({ id: 'dataSet.detail.status.labeled' }) },
  'unlabeled': { color: '#f50', text: getF({ id: 'dataSet.detail.status.unlabeled' }) },
  'labeling': { color: '#87d068', text: getF({ id: 'dataSet.detail.status.labeling' }) },
  'initialized': { color: '#999', text: getF({ id: 'dataSet.detail.status.initialized' }) },
  'creating': { color: '#87d068', text: getF({ id: 'dataSet.detail.status.creating' }) },
  'success': { color: '#2db7f5', text: getF({ id: 'dataSet.detail.status.success' }) },
  'publishing': { color: '#2db7f5', text: getF({ id: 'dataSet.detail.status.publishing' }) },
  'failed': { color: '#f50', text: getF({ id: 'dataSet.detail.status.failed' }) },
  'adding': { color: '#87d068', text: getF({ id: 'dataSet.detail.status.adding' }) },
  'submitting': { color: '#87d068', text: getF({ id: 'dataSet.detail.status.submitting' }) },
  'copying': { color: '#87d068', text: getF({ id: 'dataSet.detail.status.copying' }) },
};

export type OperateType = 'view' | 'edit' | 'download' | 'release' | 'delete';

interface Props {
  listAPI: string;
  sourceType: DataType[];
  onOperationClick: (record: VersionType, type: OperateType, callback?: () => void) => void;
}

export interface VersionType {
  id: string | number;
  version: string;
  isPublished: boolean;
}

const VersionList: React.FC<Props> = props => {
  const { formatMessage: f } = useIntl();
  const tableRef = useRef<ActionType<VersionType>>();
  const { listAPI, sourceType, onOperationClick } = props;

  const columns: ATableColumn<VersionType>[] = [
    {
      title: f({ id: 'dataSet.detail.versionList.version' }),
      dataIndex: 'version',
      render: text => text || f({ id: 'dataSet.detail.versionList.noVersion' }),
    },
    {
      title: f({ id: 'dataSet.detail.versionList.operator' }),
      dataIndex: 'operator',
    },
    // {
    //   title: f({ id: 'dataSet.detail.versionList.itemNum' }),
    //   dataIndex: 'itemNum',
    // },
    {
      title: f({ id: 'dataSet.detail.versionList.status' }),
      dataIndex: 'status',
      render: text => (
        <Tag color={STATUS_CONFIG[text || 'initialized']?.color}>
          {STATUS_CONFIG[text || 'initialized']?.text}
        </Tag>
      ),
    },
    {
      title: f({ id: 'dataSet.detail.versionList.labels' }),
      dataIndex: 'labels',
      render: text => text?.map((i: string) => <span>{i}；</span>)
    },
    {
      title: f({ id: 'dataSet.detail.versionList.sourceVersion' }),
      dataIndex: 'sourceVersion',
    },
    {
      title: f({ id: 'dataSet.detail.versionList.sourceType' }),
      dataIndex: 'sourceType',
      render: text => getText(sourceType, text) || '-',
    },
    {
      title: f({ id: 'dataSet.detail.versionList.createdAt' }),
      dataIndex: 'createdAt',
      format: 'time',
      // render: text => moment(text).format(TIMEFORMAT),
    },
    {
      title: f({ id: 'global.operation' }),
      dataIndex: 'operation',
      align: 'right',
      render: (text, record) => {
        return (
          <Space split={<Divider type='vertical' />} size={0}>
            <a onClick={() => onOperationClick(record, 'view')}>
              {f({ id: 'global.view' })}
            </a>
            {/* <a onClick={() => onOperationClick(record, 'edit')}>
              {f({ id: 'global.edit' })}
            </a> */}
            {/* <a onClick={() => onOperationClick(record, 'download')}>
              {f({ id: 'global.download' })}
            </a> */}
            <a
              className={record.isPublished ? 'disabledText' : ''}
              onClick={() => {
                if (!record.isPublished) {
                  onOperationClick(record, 'release', () => {
                    tableRef.current?.reload();
                  });
                }
              }}
            >
              {f({ id: 'global.release' })}
            </a>
            <Popconfirm
              title={f({ id: 'global.delete.name.tips' }, { name: record.version })}
              onConfirm={() => onOperationClick(record, 'delete', () => {
                // tableRef.current?.reload();
                history.push('/dataManage');
              })}
              placement='topRight'
            >
              <a className='dangerText'>{f({ id: 'global.delete' })}</a>
            </Popconfirm>
          </Space>
        )
      }
    },
  ];

  return (
    <Card title={<h1>{f({ id: 'dataSet.detail.versionList' })}</h1>}>
      <ATable
        actionRef={tableRef}
        request={adhubRequest}
        dataSourceAPIPath={listAPI}
        columns={columns}
        rowKey='id'
      />
    </Card>
  )
}

export default VersionList;